<style lang="less">
    .mainhead {
        width: 100%;
        height: 60px;
        max-height: 60px;
        background: #fff;
        box-shadow: 0 2px 1px 1px hsla(0,0%,39%,.1);
        position: relative;
        text-align: left;
        z-index: 11;
        display: flex;
        align-items: center;
        /*h2{
            display: inline-block;
            width: 200px;
            border-right: 1px solid rgb(73, 80, 96);
            line-height: 60px;
            text-align: center;
            background: rgb(73, 80, 96);
            color: #fff;
        }*/
        .head-left{
            display: inline-block;
            padding: 6px;
            .ivu-btn{
                transition: all .3s;
            }
        }
        .head-middle{
            display: inline-block;
            margin-left: 15px;
        }
        .head-right{
            display: inline-block;
            position: absolute;
            top: 0;
            right: 0;
            width: 300px;
            height: 100%;
            .headright-usermsg{
                position: absolute;
                right: 0;
                top: 0;
                width: 150px;
                height: 100%;
                .headright-usermsg-row{
                    height: 100%;
                    padding-right: 14px;
                }
            }
        }
    }
</style>
<template>
    <div class="mainhead">
        <div class="head-left">
            <Button :style="{transform: 'rotateZ(' + (this.isHideMenu ? '-90' : '0') + 'deg)'}" type="text" @click="toggleClick">
                <Icon type="navicon" size="32"></Icon>
            </Button>
        </div>
        <div class="head-middle">
            <Breadcrumb>
                <Breadcrumb-item v-for="(item, index) in breadcrumb" :key="index" @click.native="breadcrumbClick(item)" :to="item.path">{{ item.name }}</Breadcrumb-item>
            </Breadcrumb>
        </div>
        <div class="head-right">
            <div class="headright-usermsg">
                <Row type="flex" justify="end" align="middle" class="headright-usermsg-row">
                    <Dropdown placement="bottom-end" trigger="click" @on-click="back">
                        <a href="javascript:void(0)">
                            用户名
                            <Icon type="arrow-down-b"></Icon>
                        </a>
                        <Dropdown-menu slot="list">
                            <!--<Dropdown-item>个人中心</Dropdown-item>-->
                            <Dropdown-item name="back">退出登录</Dropdown-item>
                        </Dropdown-menu>
                    </Dropdown>
                    <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" style="margin-left: 15px;"/>
                </Row>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            isHideMenu: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                breadcrumb: this.$store.state.breadcrumb
            }
        },
        watch: {
            '$store.state.breadcrumb': {
                handler: function (val, oldVal) {
                    this.breadcrumb = val
                },
                deep: true
            }
        },
        methods: {
            toggleClick () {  //  菜单切换按钮点击事件
                //  this.isHideMenu = !this.isHideMenu
                this.$emit('menuToggleClick', this.isHideMenu)
            },
            breadcrumbClick (item) {
                console.log(item)
                if (item.id) {
                    this.$store.commit('setCurrentTagName', item.id)
                }
            },
            back (name) {
                console.log(name)
                this.$router.push({
                    name: 'login'
                });
            }
        }
    };
</script>
